<template>
  <div>
    <el-table :data="tableData.filter((item, i) => i >= (page - 1) * limit && i < page * limit)" border
      style="width: 100%" current-row-key="bannerid">
      <el-table-column label="序号" width="180" max-height="50">
        <template #default="prop">
          {{ prop.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="类别图" width="180" max-height="50">
        <template #default="prop">
          <img height="100" :src="prop.row.img" alt="">
        </template>
      </el-table-column>
      <el-table-column label="主类别" :fit="false" max-height="50">
        <template #default="prop">
          <div style="overflow: hidden; max-height: 69px;">
            {{ prop.row.link }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="类别分支" max-height="50">
        <template #default="prop">
          <el-collapse v-model="activeNames" @change="handleChange">

            <el-collapse-item title="展开分支" :name="prop.$index">
              <div style="text-align:center;">--特惠推荐--</div>
              <!-- <div v-for="item in row.proItem" style="text-align:center;">{{ item }}</div> -->
            </el-collapse-item>
          </el-collapse>
        </template>
      </el-table-column>
      <el-table-column label="查看/修改分支" max-height="50">
        <template #default="{ row }">

          <el-button size="mini" type="primary" @click="$emit('edit', row)">查看/修改分支</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" max-height="50">
        <template #default="{ row }">
          <div>
            <el-button size="mini" type="danger" @click="$emit('del', row.bannerid)">删除本类别</el-button>
          </div>
        </template>

      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNames:''
    }
  },
  methods: {
    handleChange(val){
      console.log(val);
    }
  },
  props: {
    tableData: {
      type: Array
    },
    limit: {
      type: Number
    },
    page: {
      type: Number
    }
  }
}
</script>

<style lang="scss" scoped></style>